<template>
  <div>
    <h1>LogPosition Table {{new Date()}}</h1>

    <el-form :inline="true">
      <el-form-item>
        <el-input placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="doSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      border
      stripe
      :data="logPositionList">
      <el-table-column sortable prop="destination" label="destination"/>
      <el-table-column sortable prop="masterFile" label="masterFile"/>
      <el-table-column sortable prop="masterPosition" label="masterPos"/>
      <el-table-column sortable prop="serverId" label="serverId"/>
      <el-table-column sortable prop="slaveId" label="slaveId"/>
      <el-table-column sortable prop="slaveJournalName" label="slaveJournal"/>
      <el-table-column sortable prop="slavePosition" label="slavePos"/>
      <el-table-column sortable prop="slaveTimestamp" label="slaveTime"/>

      <el-table-column label="slaveDate">
        <span slot-scope="scope">{{toDate(scope.row.slaveTimestamp)}}</span>
      </el-table-column>

      <el-table-column label="位置差">
        <span slot-scope="scope">{{scope.row.masterPosition - scope.row.slavePosition}}</span>
      </el-table-column>

      <el-table-column label="时间差">
        <span slot-scope="scope">{{new Date().getTime() - scope.row.slaveTimestamp}}</span>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link :href="'#/BinaryLogs?destination=' + scope.row.destination">BinLog</el-link>
          <a style="margin-left:5px;text-decoration: none;" :href="'/budo-graph/127.0.0.1/0/line-graph?type=METRIC&key=canal-' + scope.row.dataNodeId">Graph</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Moment from 'moment'

export default {
  data() {
    return {
      logPositionList: []
    };
  },

  methods: {
    toDate( _timestamp ) {
      return Moment(_timestamp).format('YYYY-MM-DD HH:mm:ss')
    },

    doSearch() {
      var _this = this;
      sdk.LogPositionApi().listLogPosition().then(res => {
        _this.logPositionList = res;
      });
    }
  },

  mounted() {
    this.doSearch();
  }
}
</script>